<!DOCTYPE html>
<html>

<head>
    <title> 电影中心 </title>
    <%- include common %>
</head>
<style>
    .img-box {
        width: 100%;
        height: 340px;
        overflow: hidden;
    }

    .img-box img {
        width: 100%;
    }

    .gongneng {
        display: flex;
        margin: 10px 0;
        padding: 0 10px;
    }

    .gongneng a , .gongneng p{
        width: 100px;
        text-align: center;
        margin: 5px 0;
        margin-right: 30px;
        padding: 0;
        line-height: 30px;
        height: 30px;
    }

    .gongneng span {
        font-size: 18px;
        margin-left: 10px;
        line-height: 18px;
    }

    .gongneng .sousuo-kuang {
        box-sizing: border-box;
        border: 1px solid #999;
        height: 30px;
        padding: 5px;
        margin: 5px 0;
    }

    .gongneng input {
        outline: none;
        border: none;
        height: 100%;
        width: 150px;
    }

    #sousuo-btn {
        height: 30px;
        margin: 5px 0;
        width: 50px;
        padding: 0;
        line-height: 30px;
        border-radius: 0;
    }
    .xinxi-box{
        border: 2px solid #999;
        border-top: none;
        padding: 6px 5px;
        margin-bottom: 20px;
    }
    .xinxi-box p , .xinxi-box h4{
        margin: 0;
        margin-bottom: 5px;
    }
</style>

<body>
    <%- include('head',{title:'movie'}) %>
        <div class="container">
            <h2 class="text-success">电影中心</h2>
            <div class="gongneng">
                <a class="btn btn-info" type="button" href="/movie">全部</a>
                <p class="btn btn-info year-btn" type="button" onclick="yearpaixu()" >年份<span>↑</span></p>
                <p class="btn btn-info average-btn" type="button" onclick="averagepaixu()">评分<span>↑</span></p>
                <div class="sousuo-kuang">
                    <input type="text" id="sousuo" placeholder="请输入关键字...">
                </div>
                <p class="btn btn-primary" id="sousuo-btn" type="button" onclick="sousuokey()">搜索</p>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <% result.forEach((item,i)=>{ %>
                        <div class="col-md-3 mv-item">
                            <a href="/mvdetail?mid=<%-  item.id   %>">
                                <div class="list-box">
                                    <div class="img-box">
                                        <img src="<%- item.images.large.replace(/img7/,'img3') %>" alt="">
                                    </div>
                                    <div class="xinxi-box">
                                        <h4 class="text-success">
                                            <%- item.title%>
                                        </h4>
                                        <p>年份: <%- item.year%>
                                        </p>
                                        <p>导演: <%- item.directors[0].name %>
                                        </p>
                                        <p>评分: <%- item.rating.average%>
                                        </p>
                                        <p>分类: <%- item.genres %>
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <% }) %>
                </div>
            </div>
        </div>

</body>

<script>
    var key = "";

    //年份排序
    var yearnum = 1
    function yearpaixu(){
        yearnum *= -1;
        if(yearnum > 0){
           $(".year-btn span").text("↑");
        } else {
           $(".year-btn span").text("↓");
        }
        $.ajax({
            url: "/movie/year",
            type: "get",
            data: {
                sortnum: yearnum,
                key,
            },
            success(res) {
                if (res.type) {
                    movielist(res.result)
                } else {

                }
            }
        })
    }

    //评分排序
    var averagenum = 1
    function averagepaixu(){
        averagenum *= -1;
        if(averagenum > 0){
           $(".average-btn span").text("↑");
        } else {
           $(".average-btn span").text("↓");
        }
        $.ajax({
            url: "/movie/average",
            type: "get",
            data: {
                sortnum: averagenum,
                key,
            },
            success(res) {
                if (res.type) {
                    movielist(res.result)
                } else {

                }
            }
        })
    }

    //搜索
    function sousuokey() {
        key = $("#sousuo").val();
        $.ajax({
            url: "/movie/sousuo",
            type: "get",
            data: {
                key,
            },
            success(res) {
                if (res.type) {
                    movielist(res.result)
                } else {

                }
            }
        })
    }


    function movielist(result) {
        var html = ""
        result.forEach(({ id, images: { large }, title, year,rating:{average}, genres ,directors }) => {
            html += `
                <div class="col-md-3 mv-item" >
                    <a href="/mvdetail?mid=${id}">  
                        <div class="list-box">
                            <div class="img-box">
                                <img src="${large.replace(/img7/, 'img3')}" alt="">
                            </div>
                            <div class="xinxi-box">
                                <h4 class="text-success">${title}</h4>
                                <p>年份: ${year}</p>
                                <p>年份: ${directors[0].name}</p>
                                <p>评分: ${average}</p>
                                <p>分类: ${genres}</p>
                            </div>
                        </div>
                    </a>
                </div>
                `
        });
        $('.row').html(html);
    }
</script>

</html>